<template>
  <basic-container>
    <avue-skeleton :loading="waiting" avatar :rows="8">
      <avue-title style="margin-bottom: 20px" :styles="{ fontSize: '20px' }" :value="process.name"></avue-title>
      <el-card shadow="never" style="margin-top: 20px">
        <avue-form
          v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))"
          v-model="form"
          ref="form"
          :option="option"
          :defaults.sync="defaults"
          :upload-preview="handleUploadPreview"
        >
        </avue-form>
      </el-card>

      <el-card shadow="never" style="margin-top: 20px" v-if="showExamForm">
        <wf-examine-form ref="examineForm" :process="process" @user-select="handleUserSelect"></wf-examine-form>
      </el-card>
      <div style="height: 120px"></div>
      <el-row
        class="foot-item avue-affix"
        :style="{ width: isCollapse ? 'calc(100% - 80px)' : 'calc(100% - 260px)' }"
        id="avue-view"
      >
        <el-button type="primary" size="medium" v-loading="loading" @click="handleStartProcess">发起</el-button>
        <el-button
          v-if="permission.wf_process_draft"
          type="success"
          size="medium"
          v-loading="loading"
          @click="handleDraft(process.id, process.formKey, form)"
          >存为草稿</el-button
        >
      </el-row>
    </avue-skeleton>

    <!-- 人员选择弹窗 -->
    <wf-user-select
      ref="user-select"
      :check-type="checkType"
      :default-checked="defaultChecked"
      @onConfirm="handleUserSelectConfirm"
    ></wf-user-select>
  </basic-container>
</template>

<script>
import WfExamineForm from './examForm.vue'
import WfUserSelect from './user-select'
import exForm from '../../mixins/ex-form'
import draft from '../../mixins/draft'

export default {
  components: {
    WfUserSelect,
    WfExamineForm
  },
  mixins: [exForm, draft],
  watch: {
    '$route.params.params': {
      handler(val) {
        if (val) {
          const param = JSON.parse(Buffer.from(val, 'base64').toString())
          const { processId } = param
          if (processId) this.getForm(processId)
        }
      },
      immediate: true
    }
  },
  computed: {
    showExamForm() {
      const { hideComment, hideCopy, hideExamine } = this.process
      return !hideComment || !hideCopy || !hideExamine
    }
  },
  data() {
    return {
      defaults: {},
      form: {},
      option: {},
      process: {},
      loading: false
    }
  },
  methods: {
    getForm(processId) {
      this.getStartForm(processId).then(res => {
        let { process, form, startForm } = res
        this.form.processId = process.id
        if (form) {
          const option = { ...eval('(' + form + ')'), menuBtn: false }
          const { column, group } = option

          const groupArr = []
          const columnArr = this.filterAvueColumn(column, startForm).column
          if (group && group.length > 0) {
            // 处理group
            group.forEach(gro => {
              gro.column = this.filterAvueColumn(gro.column, startForm).column
              if (gro.column.length > 0) groupArr.push(gro)
            })
          }

          option.column = columnArr
          option.group = groupArr
          this.option = option

          if (this.permission.wf_process_draft) {
            // 搜索是否有草稿箱
            this.initDraft(process.id).then(data => {
              this.$confirm('是否恢复之前保存的草稿？', '提示', {})
                .then(() => {
                  this.form = JSON.parse(data)
                })
                .catch(() => {})
            })
          }
        }
        this.waiting = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.foot-item {
  position: fixed;
  bottom: 0;
  margin-left: -20px;
  // right: 0;
  z-index: 101;
  height: 66px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
